<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
    <#include "/inc/head.ftl"/>
    <@head/>
</head>

<body>
    <div id="wrapper">
        <!-- Navigation -->
        <#include "/inc/nav.ftl"/>
        <@nav/>
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel-body">
                        <!--<button id="btn-add" type="button" class="btn btn-success">添加订单</button>-->
                        <!--<button id="btn-edit" type="button" class="btn btn-warning">修改订单信息</button>-->
                        <button id="btn-more" type="button" class="btn btn-success">查看订单</button>
                        <button id="btn-del" type="button" class="btn btn-danger">删除订单</button>
                        <button id="btn-pay" type="button" class="btn btn-primary">结算订单</button>
                    </div>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">订单列表</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-borderListed table-hover" id="list">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>餐桌号</th>
                                        <th>下单时间</th>
                                        <th>总价格</th>
                                        <th>支付状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
        </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
    <!-- Page-Scripts  -->
    <script>
          $(document).ready(function() {
            	var table = $('#list').DataTable({   //此处list与页面table的id相同
                	ajax: '${contextPath}/orderList/list',
                	language: {
            			"url": "${contextPath}/vendor/datatables/i18n/Chinese.json"   //datatables国际化
        			}, 
                    columns: [
                         {data: "id","visible" : false},
                         {data: "seatNumber"},
                         {data: "orderTime"},
                         {data: "totalPrice"},
                         {data:"orderType"}

            	   ],
                   responsive: true,
                   select: true //datatables select 插件
                });

            /* 添加订单按钮 */
            $('#btn-add').click(function() {
                layer.open({ //layer弹出层
                    type: 2,
                    title: "添加订单",
                    area: ['400px', '380px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '${contextPath}/orderList/add',
                    end: function(index) {
                        table.ajax.reload();
                    }
                });
            });
            /* 查看订单明细按钮 */
            $('#btn-more').click(function() {
                var rowData = table.rows({
                    selected: true
                }).data().toArray();
                if (rowData.length == 1) {
                    var id = rowData[0].id;
                    layer.open({
                        type: 2,
                        title: "查看订单信息",
                        area: ['800px', '500px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: '${contextPath}/orderList/detail?id=' + id,
                        end: function(index) {
                            table.ajax.reload();
                        }
                    });
                } else {
                    layer.msg('请选择一行!', {
                        time: 1000,
                        icon: 7
                    });
                }
            });
            /* 修改订单信息按钮 */
            $('#btn-edit').click(function() {
                var rowData = table.rows({
                    selected: true
                }).data().toArray();
                if (rowData.length == 1) {
                    var id = rowData[0].id;
                    layer.open({
                        type: 2,
                        title: "修改订单信息",
                        area: ['400px', '400px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: '${contextPath}/orderList/edit?id=' + id,
                        end: function(index) {
                            table.ajax.reload();
                        }
                    });
                } else {
                    layer.msg('请选择一行!', {
                        time: 1000,
                        icon: 7
                    });
                }
            });

            /* 删除按钮 */
            $('#btn-del').click(function() {
                var rowData = table.rows({
                    selected: true
                }).data().toArray(); //得到datatables选中行的值并转成数组
                if (rowData.length == 1) {
                    layer.msg('你确定删除该订单吗?', {
                        time: 0,
                        title: "删除订单",
                        success: function(layero, index) {
                            function fn(event) {
                                if (event.keyCode === 27) {
                                    layer.close(index)
                                }
                                if (event.keyCode === 13) {
                                    $('.layui-layer-btn0').click();
                                }
                            }
                            $(window).one('keydown', fn);
                        },
                        area: ['300px', '150px'],
                        fixed: false, //不固定
                        btn: ['确定', '取消'],
                        yes: function(index) {
                            del(rowData[0].id);
                            layer.close(index);
                        }
                    });
                } else {
                    layer.msg('请选择一行!', {
                        time: 1000,
                        icon: 7
                    });
                }
            });
            /* 删除操作 */
            function del(id) {
                $.ajax({
                    type: "post",
                    url: "${contextPath}/orderList/delete",
                    dataType: "json",
                    data: {
                        "id": id
                    },
                    success: function(data) {
                        if (data.result) {
                            layer.msg(data.msg, {
                                time: 1000,
                                icon: 1
                            });
                            table.ajax.reload();
                        }
                    },
                    error: function() {
                        layer.msg('系统出错!', {
                            time: 1000,
                            icon: 2
                        });
                    }
                });
            }
            /* 订单分类按钮 */
            $('#btn-auth').click(function() {
                var rowData = table.rows({
                    selected: true
                }).data().toArray();
                if (rowData.length == 1) {
                    var id = rowData[0].id;
                    layer.open({
                        type: 2,
                        title: "订单分类",
                        area: ['400px', '300px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: '${contextPath}/orderList/view_classify?id=' + id,
                        end: function(index) {
                            table.ajax.reload();
                        }
                    });
                } else {
                    layer.msg('请选择一行!', {
                        time: 1000,
                        icon: 7
                    });
                }
            });
              /* 结算订单按钮 */
              $('#btn-pay').click(function() {
                  var rowData = table.rows({
                      selected: true
                  }).data().toArray();
                  if (rowData.length == 1) {
                      var id = rowData[0].id;
                      $.ajax({
                          type: "get",
                          url: "${contextPath}/orderList/checkout?id=" + id,
                          dataType: "json",
                          success: function (json) {
                              if (!json.result) {
                                  layer.msg(json.msg, {
                                      time: 1000,
                                      icon: 2
                                  });
                              } else {
                                  layer.msg(json.msg, {
                                      time: 1000,
                                      icon: 1,
                                      end:function(index){
                                          parent.location.reload();
                                      }
                                  });
                              }
                          },
                          error: function () {
                              layer.msg('系统出错!', {
                                  time: 1000,
                                  icon: 2
                              });
                          }

                      })
                  } else {
                      layer.msg('请选择一行!', {
                          time: 1000,
                          icon: 7
                      });
                  }
              });


        });
    </script>
</body>

</html>